<template>
  <div class="supplier-container">
    <!-- 头部信息区域 -->
    <div class="header-section" :style="{ paddingTop: windowBarHeight + 'px' }">
      <div class="header-bg"></div>
      <div class="user-profile">
        <div class="avatar-section">
          <div class="logo-box">
            <img :src="supplierInfo.info?.logo" class="logo-img" />
          </div>
          <div class="user-info">
            <div class="user-name">{{ supplierInfo.info?.name || '未设置' }}</div>
            <div class="user-role">{{supplierInfo.role || '未设置角色'}}</div>
          </div>
        </div>
        <div class="logout-btn" @click="handleLogout">退出登录</div>
      </div>

      <!-- 数据卡片 -->
      <div class="stats-card">
        <div class="card-header">
          <div class="card-title">我的订单</div>
          <div class="card-tabs" @click="handleFeatureClick('店铺订单')" v-if="checkRoles('wx_storeSingle')">
            <div class="card-tab active">全部订单</div>
            <div class="card-tab-arrow">
              <text class="gui-icons gui-block  gui-text" style="font-size: 36rpx;color: #808080;">&#xe601;</text>
            </div>
          </div>
        </div>
        
        <!-- 统计数据区域 -->
        <div class="stats-section">
          <div class="stat-item">
            <div class="stat-value">{{ formatNumber(statisticsInfo.today_order) || 0 }}</div>
            <div class="stat-label">今日订单数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ formatNumber(statisticsInfo.yesterday_order) || 0 }}</div>
            <div class="stat-label">昨日订单数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ formatNumber(statisticsInfo.same_month_order)|| 0 }}</div>
            <div class="stat-label">当月订单数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ formatNumber(statisticsInfo.total_order) || 0 }}</div>
            <div class="stat-label">总订单数</div>
          </div>
        </div>

        <!-- 金额统计区域 -->
        <div class="money-stats-section">
          <div class="stat-item">
            <div class="money-value">{{ formatNumber(statisticsInfo.today_price) || 0 }}</div>
            <div class="stat-label">今日成交金额</div>
          </div>
          <div class="stat-item">
            <div class="money-value">{{ formatNumber(statisticsInfo.yesterday_price)|| 0 }}</div>
            <div class="stat-label">昨日成交金额</div>
          </div>
          <div class="stat-item">
            <div class="money-value">{{ formatNumber(statisticsInfo.same_month_price) || 0 }}</div>
            <div class="stat-label">当月成交金额</div>
          </div>
          <div class="stat-item">
            <div class="money-value">{{ formatNumber(statisticsInfo.total_price) || 0 }}</div>
            <div class="stat-label">成交总金额</div>
          </div>
        </div>
        <div class="money-stats-section">
          <div class="stat-item">
            <div class="money-value">{{ formatNumber(statisticsInfo.settlement_price) || 0 }}</div>
            <div class="stat-label">已结款金额</div>
          </div>
          <div class="stat-item">
            <div class="money-value">{{ formatNumber(statisticsInfo.un_settlement_price)|| 0 }}</div>
            <div class="stat-label">未结款金额</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 管理模块标题 -->
    <div class="module-section">
      <div class="module-title">
        <img
          style="width: 48rpx; height: 48rpx"
          src="@/static/switch_tabs/setting.png"
        ></img>
        <div class="title-text">管理模块</div>
      </div>

      <!-- 功能区域 -->
      <div class="feature-grid">
        <!-- 第一行功能 -->
        <div class="feature-row">
          <div class="feature-item" @click="handleFeatureClick('店铺管理')" v-if="checkRoles('wx_storelist')">
            <img src="@/static/switch_tabs/user.png" class="feature-icon" />
            <div class="feature-name">店铺管理</div>
          </div>
          <div class="feature-item" @click="handleFeatureClick('店铺邀请')" v-if="checkRoles('wx_storeShare')">
            <img src="@/static/switch_tabs/u42.svg" class="feature-icon" />
            <div class="feature-name">店铺邀请</div>
          </div>
          <div class="feature-item" @click="handleFeatureClick('店铺订单')" v-if="checkRoles('wx_storeSingle')">
            <img src="@/static/switch_tabs/u72.svg" class="feature-icon" />
            <div class="feature-name">店铺订单</div>
          </div>
          <div class="feature-item" @click="handleFeatureClick('店铺审核')" v-if="checkRoles('wx_storeAudit')">
            <img src="@/static/switch_tabs/store.png" class="feature-icon" />
            <div class="feature-name">店铺审核</div>
          </div>
          <div class="feature-item" @click="handleFeatureClick('商品管理')" v-if="checkRoles('wx_goodlist')">
            <img src="@/static/switch_tabs/u36.svg" class="feature-icon" />
            <div class="feature-name">商品管理</div>
          </div>
          <div class="feature-item" @click="handleFeatureClick('供应商信息')" v-if="checkRoles('wx_supplierInfo')">
            <img src="@/static/switch_tabs/u40.svg" class="feature-icon" />
            <div class="feature-name">供应商信息</div>
          </div>
          <div class="feature-item" @click="handleFeatureClick('通用折扣')" v-if="checkRoles('wx_discount')">
            <img src="@/static/switch_tabs/u64.svg" class="feature-icon" />
            <div class="feature-name">通用折扣</div>
          </div>
          <div class="feature-item" @click="handleFeatureClick('区域规划')" v-if="checkRoles('wx_brandApply')">
            <img src="@/static/switch_tabs/brandApply.png" class="feature-icon" />
            <div class="feature-name">品牌申请</div>
          </div>
          <div class="feature-item" @click="handleFeatureClick('品牌查看')" v-if="checkRoles('wx_brnadView')">
            <img src="@/static/switch_tabs/view.png" class="feature-icon" />
            <div class="feature-name">品牌查看</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getSupplierInfo, getHomeInfo } from "@/api/supplier";
import { loginOut } from "@/api/login";
import { onLoad,onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import { clearToken } from "@/utils/vmeitime-http/localStorage";
// 功能点击事件处理
const handleFeatureClick = (featureName) => {
  console.log(`点击了功能：${featureName}`);
  switch (featureName) {
    case "店铺管理":
      uni.navigateTo({
        url: "/pages/audit/storelist",
      });
      break;
    case "店铺邀请":
      uni.navigateTo({
        url: "/pages/share/index?id="+ supplierInfo.value.info.id,
      });
      break;
    case "店铺订单":
      uni.navigateTo({
        url: "/pages/order/supplierOrder",
      });
      break;
    case "店铺审核":
      uni.navigateTo({
        url: "/pages/audit/auditStore",
      });
      break;
    case "商品管理":
      uni.navigateTo({
        url: "/pages/goods/goodsList",
      });
      break;
    case "供应商信息":
      uni.navigateTo({
        url: "/pages/supplier/supplierInfo",
      });
      break;
    case "通用折扣":
      uni.navigateTo({
        url: "/pages/discount/index",
      });
      break;
    case "区域规划":
      uni.navigateTo({
        url: "/pages/brandApply/index",
      });
      break;
    case "品牌查看":
      uni.navigateTo({
        url: "/pages/brandView/index",
      });
      break; 
  }
};
const supplierInfo = ref({
  id: undefined,
  info: {},
  role: '',
});

//超过一万显示W结尾
const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(2) + 'W';
  }
  return num;
};
const statisticsInfo = ref({});
const getInfo = async () => {
  const res = await getSupplierInfo();
  supplierInfo.value = res;
};
const getStatisticsInfo = async () => {
  const res = await getHomeInfo();
  statisticsInfo.value = res;
};

const handleLogout = async () => {
  // await loginOut();
  clearToken();
  uni.reLaunch({
    url: "/pages/login/login",
  });
};
const windowBarHeight = getApp().globalData.systemInfo.statusBarHeight;
onShow(async () => {
  await getInfo();
  await getStatisticsInfo();
});
onLoad(async () => {

});
</script>

<style scoped>
.supplier-container {
  padding: 0;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 头部区域样式 */
.header-section {
  position: relative;
  padding-bottom: 30rpx;
}

.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 350rpx;
    background-color: #3399ff;
    z-index: 0;
}

.user-profile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 30rpx;
  z-index: 1;
}

.avatar-section {
  display: flex;
  align-items: center;
}

.logo-box {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  border: 4rpx solid rgba(255, 255, 255, 0.6);
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  margin-left: 20rpx;
}

.user-name {
  font-size: 34rpx;
  font-weight: 500;
  color: #fff;
  margin-bottom: 8rpx;
}

.user-role {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
}

.logout-btn {
  padding: 10rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 26rpx;
  border-radius: 30rpx;
  border: none;
  position: relative;
  top: 30rpx;
}

/* 数据卡片 */
.stats-card {
  position: relative;
  margin: 0 30rpx;
  padding: 20rpx 30rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05);
  z-index: 2;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.card-tabs {
  display: flex;
  align-items: center;
}

.card-tab {
  font-size: 26rpx;
  color: #999;
}

.card-tab.active {
  color: #333;
}

.card-tab-arrow {
  margin-left: 10rpx;
  color: #999;
  font-size: 26rpx;
}

/* 统计数据区域 */
.stats-section,
.money-stats-section {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  padding: 20rpx 0;
}

.stats-section {
  border-bottom: 1px solid #f5f5f5;
}

.stat-item {
  width: 25%;
  text-align: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.money-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff6b00;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
}

/* 模块标题和功能区域 */
.module-section {
  margin: 30rpx 30rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.module-title {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.title-text {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-left: 15rpx;
}

/* 功能区域 */
.feature-grid {
  padding: 20rpx;
}

.feature-row {
  display: flex;
  margin-bottom: 30rpx;
  flex-wrap: wrap;
}

.feature-row:last-child {
  margin-bottom: 10rpx;
}

.feature-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}

.feature-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 15rpx;
}

.feature-name {
  font-size: 28rpx;
  color: #333;
}

.empty {
  visibility: hidden;
}
</style>
